<script setup>
import { ref,reactive,computed,watch,watchEffect } from "vue";
import EditorSpan from "./editorSpan.vue"
defineProps({
    spanList:Array,
    rowIndex:Number,
	//selectWidth:String,
	currentRow:Number,
	height:Number
})

const emits=defineEmits(["columnPos"])
</script>

<template>
<div class="row" :index="rowIndex+1" :style="{minHeight:`${height}px`}">
	<!-- <div v-show="rowIndex===currentRow" class="select" :style="{width:selectWidth}"></div> -->
    <EditorSpan class="zIndex"
        v-for="item,index in spanList"
		:key="item"
        v-model="spanList[index]"
        :spanIndex="index"
        :rowIndex="rowIndex"
		@click.stop="emits('columnPos',{e:$event,spanIndex:index,rowIndex})"
    ></EditorSpan>
</div>

</template>


<style scoped>
.row{
    min-height: 1em;
}
.index{
	user-select: none;
}
.select{
	position:absolute;
	background-color: rgba(255, 255, 255, 0.50);
	height: 1.3em;
	animation: input 1s infinite;
	z-index: 0;
}
.zIndex{
	z-index: 1;
	position: relative;
}
@keyframes input{
	from{
		border-width: 0px;
	}
	to{
		border-right:1px solid #fff;
	}
}
</style>